<template>
    <div class="manage-dict">
        <div style="height: 35px">
            <el-form :model="searchForm" :inline="true" size="mini">
                <el-form-item label="name">
                    <el-input v-model="searchForm.name"></el-input>
                </el-form-item>
                <el-form-item label="code">
                    <el-input v-model="searchForm.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="listDict">Search</el-button>
                    <el-button type="primary" @click="listDict">Refresh</el-button>
                    <el-button type="primary" @click="handleDictCreate">New</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                border
                default-expand-all
                highlight-current-row
                :data="dictTable"
                row-key="ukId"
                height="500"
                size="mini"
                style="width: 100%"
                :tree-props="{children: 'dictItems', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="name"
                    width="*">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="code"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="value"
                    label="value"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="status"
                    width="70">
                <template slot-scope="scope">
                    <div v-if="scope.row.dictId == null">
                        <el-switch
                                @change="statusChangeDict($event, scope.row.ukId)"
                                :value="scope.row.status != '1'"
                                active-color="#909399"
                                inactive-color="#67c23a">
                        </el-switch>
                    </div>
                    <div v-if="scope.row.dictId != null">
                        <el-switch
                                @change="statusChangeDictItem($event, scope.row.ukId)"
                                :value="scope.row.status != '1'"
                                active-color="#909399"
                                inactive-color="#67c23a">
                        </el-switch>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="sort"
                    width="60">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="252">
                <template slot-scope="scope">
                    <div v-if="scope.row.dictId == null">
                        <el-button
                                size="mini"
                                @click="handleDictItemCreate(scope.row.ukId)">新建字典项
                        </el-button>
                        <el-button
                                size="mini"
                                @click="handleDictEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDictDelete(scope.row.ukId)">删除
                        </el-button>
                    </div>
                    <div v-if="scope.row.dictId != null">
                        <el-button
                                :disabled="true"
                                size="mini"
                                @click="handleDictItemCreate(scope.$index, scope.row)">新建字典项
                        </el-button>
                        <el-button
                                size="mini"
                                @click="handleDictItemEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDictItemDelete(scope.row.ukId)">删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="字典管理" :visible.sync="showDictForm" :close-on-click-modal="false" label-width="80px">
            <el-form ref="form" :model="dictForm" label-width="80px">
                <el-form-item label="字典编码">
                    <el-input v-model="dictForm.code"></el-input>
                </el-form-item>
                <el-form-item label="字典名称">
                    <el-input v-model="dictForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="dictForm.status" placeholder="请选择状态">
                        <el-option
                                v-for="item in this.$store.state.Pabu.dict.manage.STATUS.dictItems"
                                :key="item.ukId"
                                :label="item.name"
                                :value="parseInt(item.value)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="dictForm.sort" type="number" min="0" max="90000"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleDictSave">保存</el-button>
                    <el-button @click="showDictForm = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="字典项管理" :visible.sync="showDictItemForm" :close-on-click-modal="false">
            <el-form ref="form" :model="dictItemForm" label-width="100px">
                <el-form-item label="字典项编码">
                    <el-input v-model="dictItemForm.code"></el-input>
                </el-form-item>
                <el-form-item label="字典项名称">
                    <el-input v-model="dictItemForm.name"></el-input>
                </el-form-item>
                <el-form-item label="字典项值">
                    <el-input v-model="dictItemForm.value"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="dictItemForm.status" placeholder="请选择状态">
                        <el-option
                                v-for="item in this.$store.state.Pabu.dict.manage.STATUS.dictItems"
                                :key="item.ukId"
                                :label="item.name"
                                :value="parseInt(item.value)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="dictItemForm.sort" type="number" min="0" max="90000"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleDictItemSave">保存</el-button>
                    <el-button @click="showDictItemForm = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
  import {deleteDict, listDict, mapDict, saveDict, updateDictStatus} from "../../../api/manage/dict";
  import PageUtils from "../../../utils/PageUtils";
  import {deleteDictItem, saveDictItem, updateDictIterStatus} from "../../../api/manage/dictItem";
  import DictUtils from "../../../utils/DictUtils";

  export default {
    name: "Dict",
    data () {
      return {
        showDictForm: false,
        showDictItemForm: false,
        dictTable: [],
        searchForm: {},
        dictForm: {},
        dictItemForm: {}
      }
    },
    methods: {
      handleDictItemCreate (dictId) {
        this.dictItemForm = {
          dictId: dictId,
          status: 1
        }
        this.showDictItemForm = true
      },
      handleDictItemDelete (ukId) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDictItem(ukId).then(result => {
            this.listDict()
            this.showDictForm = false
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleDictItemEdit (row) {
        this.dictItemForm = row
        this.showDictItemForm = true
      },
      handleDictItemSave () {
        saveDictItem(this.dictItemForm).then(result => {
          this.listDict()
          this.showDictItemForm = false
        })
      },
      handleDictCreate () {
        this.dictForm = {
          status: 1
        }
        this.showDictForm = true
      },
      handleDictDelete (ukId) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDict(ukId).then(result => {
            this.listDict()
            this.showDictForm = false
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleDictEdit (row) {
        this.dictForm = row
        this.showDictForm = true
      },
      handleDictSave () {
        saveDict(this.dictForm).then(result => {
          this.listDict()
          this.showDictForm = false
        })
      },
      statusChangeDict (value, dictId) {
        let status = value ? 0 : 1
        updateDictStatus(dictId, status).then(result => {
          this.listDict()
          this.mapDict()
        }).catch(error => {
          console.log(error)
        })
      },
      statusChangeDictItem (value, dictItemId) {
        let status = value ? 0 : 1
        updateDictIterStatus(dictItemId, status).then(result => {
          this.listDict()
          this.mapDict()
        }).catch(error => {
          console.log(error)
        })
      },
      listDict () {
        listDict(this.searchForm, 1, 30).then(result => {
          this.dictTable = result.data.dicts.records
          PageUtils.setPagination(this, "dict", result.data.dicts)
        }).catch(error => {
          console.log(error)
        })
      },
      mapDict () {
        mapDict().then(result => {
          DictUtils.setDict(this, "manage", result.data.dictMap)
        })
      }
    },
    created () {
      this.listDict()
    }
  }
</script>

<style scoped>
    .manage-dict {
        width: 100%;
        height: 100%;
    }

    /* element ui样式重写 */
    .manage-dict > .el-table {
        height: calc(100% - 35px) !important;
    }

    .manage-dict > .el-table > .el-table__body-wrapper {
        height: calc(100% - 35px) !important;
    }
</style>